<template>
  <div id="addProducts">
    <h1>新增保险产品</h1>
    <div class="content">
      <div class="contain">
        <el-form ref="products" :model="productsData" label-width="80px">
          <el-form-item label="产品名称">
            <el-input
              v-model="productsData.name"
              placeholder="请输入产品名称"
            ></el-input>
          </el-form-item>
          <!-- 产品所属类别 -->
          <div class="productsType">
            <el-form-item label="保险类别"> </el-form-item>
            <template>
              <el-select v-model="productsData.typesId" placeholder="请选择">
                <el-option
                  v-for="item in classes"
                  :key="item._id"
                  :label="item.name"
                  :value="item._id"
                >
                </el-option>
              </el-select>
            </template>
          </div>
          <!-- 保险有效期 -->
          <div class="productsType">
            <el-form-item label="保险期限"> </el-form-item>
            <template>
              <el-select v-model="productsData.time" placeholder="请选择">
                <el-option
                  v-for="item in insureTime"
                  :key="item._id"
                  :label="item.time"
                  :value="item.time"
                >
                </el-option>
              </el-select>
            </template>
          </div>
          <!-- 适用人群 -->
          <div class="shuitableFor">
            <el-form-item label="适用人群"> </el-form-item>
            <el-checkbox-group v-model="productsData.suitableFor">
              <el-checkbox label="0-3岁幼儿"></el-checkbox>
              <el-checkbox label="3-12岁儿童"></el-checkbox>
              <el-checkbox label="老年人"></el-checkbox>
              <el-checkbox label="女士"></el-checkbox>
              <el-checkbox label="男士"></el-checkbox>
            </el-checkbox-group>
          </div>

          <!-- 保单形式 -->
          <div class="checkPolicy">
            <el-form-item label="保单形式">
              <el-checkbox-group v-model="productsData.policy">
                <el-checkbox label="纸质保单"></el-checkbox>
                <el-checkbox label="电子保单"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <!-- 价格 -->
          <el-form-item label="保险价格">
            <el-input
              v-model="productsData.price"
              placeholder="请输入价格"
            ></el-input>
          </el-form-item>
          <!-- 缴费类型 -->
          <div class="payType">
            <el-form-item label="缴费方式"> </el-form-item>
            <el-radio v-model="productsData.payType" label="月付"
              >月付</el-radio
            >
            <el-radio v-model="productsData.payType" label="季付"
              >季付</el-radio
            >
            <el-radio v-model="productsData.payType" label="年付"
              >年付</el-radio
            >
          </div>

          <!-- 可否续保 -->
          <div class="renew">
            <el-form-item label="可否续保"> </el-form-item>
            <el-switch v-model="productsData.renew"></el-switch>
          </div>

          <el-form-item>
            <el-button type="primary" @click="btnAddProducts"
              >立即创建</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="upload-pic">
        <!-- 上传产品图片 -->
        <p>上传产品图片:</p>
        <el-upload
          style="margin-top: 80px"
          class="avatar-uploader"
          action="http://localhost:3000/images/uploadImages"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="productsData.productsPic" alt="" />
        </el-dialog> -->
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapActions, mapState } = createNamespacedHelpers('products')
const {
  mapActions: mapActionsClasses,
  mapState: mapStateClasses,
} = createNamespacedHelpers('classes')

export default {
  created() {
    this.getClasses()
  },
  data() {
    return {
      imageUrl: '',
      insureType: [
        { _id: '1', name: '意外险' },
        { _id: '2', name: '健康险' },
        { _id: '3', name: '养老险' },
      ],
      insureTime: [
        { _id: '1', time: '30天' },
        { _id: '2', time: '1年' },
        { _id: '3', time: '10年' },
        { _id: '4', time: '20年' },
        { _id: '5', time: '60岁止' },
        { _id: '6', time: '终身' },
      ],
      productsData: {
        name: '',
        types: '',
        suitableFor: [],
        policy: [],
        payType: '',
        price: '',
        renew: false,
        current: false,
        productsPic: '',
        time: '',
        typesId: '',
      },
    }
  },
  computed: { ...mapStateClasses(['classes']) },
  methods: {
    ...mapActions(['addProducts']),
    ...mapActionsClasses(['getClasses']),
    btnAddProducts() {
      this.addProducts(this.productsData)
    },
    handleAvatarSuccess(res, file) {
      //图片上传成功之后
      this.productsData.productsPic = res.data
      this.imageUrl = 'http://localhost:3000/temp/' + res.data
    },
  },
}
</script>

<style lang="scss">
#addProducts {
  width: 60%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin: 20px auto 0;
  padding: 20px 20px;
  background-color: white;
  h1 {
    text-align: center;
    margin-bottom: 30px;
  }
}
.content {
  display: flex;
}
.upload-pic {
  width: 50%;
  p {
    text-align: left;
    padding-left: 30px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.checkPolicy,
.shuitableFor,
.payType,
.renew {
  display: flex;
  .el-checkbox-group,
  .el-radio {
    line-height: 40px;
  }
}
.el-switch {
  height: 40px !important;
}
.productsType {
  display: flex;
}
</style>
